<template>
  <div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('m.common.button.add') }}</a-button>
      <a-button @click="batchDel" type="default"  icon="delete">{{ $t('m.common.button.delete') }}</a-button>

      <div style="float: right">
        <a-input-search style="width: 200px;" :placeholder="$t('m.common.label.guan-jian-zi')" enter-button @search="onSearch"></a-input-search>
      </div>
    </div>

    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
    >
      <template slot="serialNum" slot-scope="text,record,index">
        {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">{{ $t('m.common.button.update') }}</a>
        <a-divider type="vertical"/>
        <a @click="handlePCDesign(record)">{{$t('m.eform.appform.other.pc_form_design')}}</a>
        <a-divider type="vertical"/>
        <a-dropdown>
          <a class="ant-dropdown-link">{{$t('m.common.button.more')}}
            <ych-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleMobileDesign(record)">{{$t('m.eform.appform.other.mobile_form_design')}}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleTest(record)">{{$t('m.eform.appform.other.pc_form_test')}}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleGetUrl(record)">{{$t('m.eform.appform.other.pc_form_url')}}</a>
            </a-menu-item>
            <a-menu-item v-if="record.formStatus == '0'">
              <a-popconfirm :title="$t('m.common.tip.enable_confirm')" @confirm="() => handleActivate(record)">
                <a>{{ $t('m.common.button.enable') }}</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.formStatus == '1'">
              <a-popconfirm :title="$t('m.common.tip.disable_confirm')" @confirm="() => handleSuspend(record)">
                <a>{{ $t('m.common.button.disable') }}</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(record.id)">
                <a>{{ $t('m.common.button.delete') }}</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>

    </a-table>

    <actAppForm-modal ref="modalForm" @ok="modalFormOk" :groupId="groupId"/>

    <form-designer-dialog ref="formDesignerDialog" @ok="modalFormOk" :groupId="groupId"/>

    <app-form-designer-dialog ref="appFormDesignerDialog" @ok="modalFormOk" :groupId="groupId"/>

    <form-redirect-modal ref="form"/>
  </div>
</template>

<script>

  import { YcListMixin } from '@/mixins/YcListMixin'
  import { filterMultiDictText } from '@/components/dict/YchDictSelectUtil'
  import { getFormUrl } from '@/utils/hbdUtil'
  import { putAction } from '@/api/manage'
  import ActAppFormModal from './modules/ActAppFormModal'
  import FormDesignerDialog from './modules/FormDesignerDialog'
  import AppFormDesignerDialog from './modules/AppFormDesignerDialog'
  import FormRedirectModal from './redirect/FormRedirectModal'
  import { EFormConstant } from './EFormConstant'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ActAppFormList',
    mixins: [YcListMixin],
    components: {
      ActAppFormModal,
      FormDesignerDialog,
      AppFormDesignerDialog,
      FormRedirectModal,
    },
    props: {
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        queryParam: {
          groupId: this.groupId
        },
        isorter: {
          column: 'orderNum',
          order: 'asc',
        },
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: 'center',
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.eform.appform.entity.formName'),
            align: 'center',
            dataIndex: 'formName'
          },
          {
            title: this.$t('m.eform.appform.entity.formCode'),
            align: 'center',
            dataIndex: 'formCode'
          },
          {
            title: this.$t('m.eform.appform.entity.formVersion'),
            align: 'center',
            width: 120,
            dataIndex: 'formVersion'
          },
          {
            title: this.$t('m.eform.appform.entity.objectName'),
            align: 'center',
            dataIndex: 'objectName'
          },
          {
            title: this.$t('m.eform.appform.entity.formStatus'),
            align: 'center',
            width: 120,
            dataIndex: 'formStatus',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(EFormConstant.status, text + '')
              }
            }
          },
          {
            title: this.$t('m.common.label.sort'),
            align: 'center',
            dataIndex: 'orderNum',
            width: 80,
          },
          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            align: 'center',
            width: 250,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: YchConstant.PREFIX_EFORM + '/manage/actAppForm/list',
          delete: YchConstant.PREFIX_EFORM + '/manage/actAppForm/delete',
          deleteBatch: YchConstant.PREFIX_EFORM + '/manage/actAppForm/deleteBatch',
          active: YchConstant.PREFIX_EFORM + '/manage/actAppForm/active',
          suspended: YchConstant.PREFIX_EFORM + '/manage/actAppForm/suspended',
        },
      }
    },
    methods: {
      handlePCDesign (record) {
        this.$refs.formDesignerDialog.model = record
        this.$refs.formDesignerDialog.visible = true
      },
      handleMobileDesign (record) {
        // this.$refs.appFormDesignerDialog.model = record
        // this.$refs.appFormDesignerDialog.visible = true
        this.$refs.appFormDesignerDialog.open(record)
      },
      handleGetUrl (record) {
        const url = getFormUrl(record.formCode)
        this.$info({
          title: this.$t('m.eform.appform.other.form_url_label'),
          content: url
        })
      },
      handleActivate (record) {
        putAction(this.url.active + '?id=' + record.id, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      },
      handleSuspend (record) {
        putAction(this.url.suspended + '?id=' + record.id, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      },
      handleTest (record) {
        this.$refs.form.add(record.formCode)
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
